<template>
  <div class="cc-main-menu">

    <q-expansion-item
      :header-inset-level="calcLevel"
      v-for="menu in menuList.filter(v=>!v.hidden)"
      :key="menu.id"
      :icon="menu.meta.icon || 'toc'"
      :label="menu.meta.title"
      :header-style="headerStyleActive(menu)"
      :value="openMenu(menu)"
      :expand-icon-class="menu.children?'':'hide-icon'"
      :group="menu.id"
      @click="go(menu)"
    >
      <base-menu-item v-if="menu.children" :menuList="menu.children" :level="level+1" />
    </q-expansion-item>
  </div>
</template>

<script>
import { openURL } from 'quasar';

export default {
  name: 'base-menu-item',
  components: {},
  props: {
    menuList: Array,
    level: Number,
  },
  data() {
    return {
    };
  },
  watch: {},
  computed: {
    calcLevel() {
      if (this.level === 1) {
        return 0;
      }
      return (this.level - 1) * 0.4;
    },
  },
  methods: {
    go(u) {
      if (u.children) {
        return;
      }
      if (u.meta && u.meta.internalOrExternal) {
        openURL(u.meta.url);
        return;
      }
      if (u.fullPath !== this.$route.fullPath) {
        // 路径不同就切换下
        this.$router.replace(u);
      } else if (this.$route.query && u.query) {
        // 参数不同也切换下
        if (this.$route.query.id !== u.query.id) {
          this.$router.push(u);
        }
      }
    },
    match(item) {
      if (this.$route.path === item.path) {
        if (this.$route.query && item.query) {
          if (this.$route.query.id === item.query.id) {
            return true;
          }
        } else {
          return true;
        }
      }
      return false;
    },
    headerStyleActive(item) {
      return this.match(item) ? { backgroundColor: '#1890ff' } : {};
    },
    matchOpen(item, result) {
      if (this.match(item)) {
        result.open = true;
      }
      if (!result.open && item.children && item.children.length > 0) {
        item.children.forEach((child) => { this.matchOpen(child, result); });
      }
    },
    openMenu(item) {
      const result = { open: false };
      this.matchOpen(item, result);
      return result.open;
    },
    itemStyleActive(item) {
      if (item.path === this.$route.path) {
        return {
          color: '#1890ff',
          backgroundColor: '#e6f7ff',
          borderRight: '0.2em solid #1890ff',
        };
      }
      return {};
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus">
.cc-main-menu
  .q-item__section--avatar
    min-width 30px
  .q-item__section--side
    color #FFF
</style>
